<template>
  <view>
    <view class="section-header">
      <view class="section-title-wrapper">
        <text class="section-title">{{ title }}</text>
      </view>
      <view class="section-more" @click="navigateToArticles">
        <text class="more-text">查看全部</text>
        <FeatherIcon name="chevron-right" size="16" color="#ff9800" />
      </view>
    </view>

    <!-- 加载中提示 -->
    <view class="loading-container" v-if="articles.length === 0 && loading">
      <FeatherIcon name="loader" size="42" color="#999" class="loading-icon" />
      <text class="loading-text">加载中...</text>
    </view>

    <view class="article-list" v-else>
      <!-- 文章列表 -->
      <template v-for="(article, index) in articles" :key="article.oId">
        <view
          class="article-item"
          @click="navigateToArticleDetail(article.oId)"
        >
          <view class="article-header">
            <image
              class="avatar"
              :src="article.articleAuthor.userAvatarURL"
              mode="aspectFill"
            ></image>
            <view class="article-info">
              <text class="author-name">{{
                article.articleAuthor.userNickname ||
                article.articleAuthor.userName
              }}</text>
              <text class="publish-time">{{ article.timeAgo }}</text>
            </view>
          </view>

          <view class="article-content">
            <text class="article-title">{{ article.articleTitle }}</text>
            <text class="article-summary">{{
              formatSummary(article.articlePreviewContent)
            }}</text>

            <!-- 帖子图片 -->
            <image
              v-if="article.articleThumbnailURL"
              :src="article.articleThumbnailURL"
              mode="aspectFill"
              class="article-image"
            ></image>
          </view>

          <view class="article-footer">
            <!-- 标签显示，移到左边 -->
            <view
              class="article-tags"
              v-if="article.articleTagObjs && article.articleTagObjs.length > 0"
            >
              <text
                class="tag"
                v-for="(tag, tagIndex) in article.articleTagObjs.slice(0, 2)"
                :key="tagIndex"
                >{{ tag.tagTitle }}</text
              >
            </view>
            <view class="stat-group">
              <view class="stat-item">
                <FeatherIcon name="eye" size="16" color="#999" />
                <text class="stat-text">{{ article.articleViewCount }}</text>
              </view>
              <view class="stat-item">
                <FeatherIcon name="message-circle" size="16" color="#999" />
                <text class="stat-text">{{ article.articleCommentCount }}</text>
              </view>
              <view class="stat-item">
                <FeatherIcon name="thumbs-up" size="16" color="#999" />
                <text class="stat-text">{{ article.articleGoodCnt }}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>

    <!-- 加载更多 -->
    <view class="loading-more" v-if="articles.length > 0">
      <view class="loading-content" v-if="loading">
        <FeatherIcon
          name="loader"
          size="36"
          color="#999"
          class="loading-icon"
        />
        <text>加载中...</text>
      </view>
      <view class="loading-content" v-else-if="!hasMore">
        <FeatherIcon name="check-circle" size="36" color="#999" />
        <text>已经到底了~</text>
      </view>
      <view class="loading-content" v-else @click="loadMore">
        <FeatherIcon name="more-horizontal" size="36" color="#999" />
        <text class="load-more-text">点击加载更多</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { htmlToText, showError } from "@/utils/common.js";
import FeatherIcon from "@/components/FeatherIcon.vue";
import api from "@/api";

const props = defineProps({
  title: {
    type: String,
    default: "推荐帖子",
  },
});

const emit = defineEmits(["navigate-to-article", "navigate-to-articles"]);

// 文章列表数据
const articles = ref([]);
const page = ref(1);
const hasMore = ref(true);
const loading = ref(false);

// 加载文章
const loadArticles = async (reset = false) => {
  if (loading.value) return;

  try {
    loading.value = true;

    if (reset) {
      page.value = 1;
      hasMore.value = true;
    }

    const res = await api.article.getRecentArticles(page.value);

    if (res.code === 0) {
      if (reset) {
        articles.value = res.data.articles || [];
      } else {
        articles.value = [...articles.value, ...(res.data.articles || [])];
      }

      // 判断是否还有更多数据
      if (!res.data.articles || res.data.articles.length < 10) {
        hasMore.value = false;
      } else {
        page.value++;
      }
    } else {
      showError(res.msg || "获取文章列表失败");
    }
  } catch (error) {
    console.error("加载文章失败", error);
  } finally {
    loading.value = false;
  }
};

// 加载更多文章
const loadMore = () => {
  if (hasMore.value && !loading.value) {
    loadArticles();
  }
};

// 格式化文章摘要
const formatSummary = (html) => {
  return htmlToText(html, 80);
};

// 跳转到文章详情页
const navigateToArticleDetail = (articleId) => {
  emit("navigate-to-article", articleId);
};

// 跳转到文章列表页
const navigateToArticles = () => {
  emit("navigate-to-articles");
};

// 初始化加载文章
onMounted(() => {
  loadArticles(true);
});
// 每次页面显示时检查登录状态，更新数据
onShow(() => {
  if (isLoggedIn()) {
    loadArticles(true);
  }
});
</script>

<style lang="scss">
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;

  .section-title-wrapper {
    display: flex;
    align-items: center;
  }

  .section-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-left: 20rpx;

    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 10rpx;
      height: 36rpx;
      width: 8rpx;
      background-color: #ff9800;
      border-radius: 4rpx;
    }
  }

  .section-more {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #ff9800;

    .more-text {
      margin-right: 6rpx;
    }
  }
}

.article-list {
  margin: 0 24rpx;

  .article-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.3s;
    overflow: hidden;

    &:active {
      transform: scale(0.98);
      opacity: 0.9;
    }
  }

  .article-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 16rpx;
      border: 2rpx solid #f0f0f0;
    }

    .article-info {
      display: flex;
      flex-direction: column;
    }

    .author-name {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .publish-time {
      font-size: 24rpx;
      color: #999;
      margin-top: 4rpx;
    }
  }

  .article-content {
    margin-bottom: 16rpx;

    .article-title {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 12rpx;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .article-summary {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .article-image {
      width: 100%;
      height: 320rpx;
      border-radius: 12rpx;
      margin-top: 16rpx;
      background-color: #f0f0f0;
    }
  }

  .article-footer {
    display: flex;
    border-top: 1rpx solid #f0f0f0;
    padding-top: 16rpx;
    justify-content: space-between;
    align-items: center;

    .stat-group {
      display: flex;
      align-items: center;
    }

    .stat-item {
      display: flex;
      align-items: center;
      margin-left: 20rpx;

      .stat-text {
        font-size: 24rpx;
        color: #999;
        margin-left: 6rpx;
      }
    }

    .article-tags {
      display: flex;

      .tag {
        font-size: 22rpx;
        color: #ff9800;
        background-color: rgba(255, 152, 0, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
        margin-right: 10rpx;
      }
    }
  }
}

/* 加载中状态 */
.loading-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .loading-icon {
    animation: rotate 1s linear infinite;
  }

  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }
}

.loading-more {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 28rpx;

  .loading-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .loading-icon {
    animation: spin 1s linear infinite;
  }

  .load-more-text {
    color: #999;
    margin-left: 8rpx;
  }

  text {
    margin-left: 8rpx;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
